<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title=${product.name}, content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${product.name} + ' - 扶贫助农电商平台'">产品详情 - 扶贫助农电商平台</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .product-image {
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .product-info {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
        }
        .price-section {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .feature-card {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 15px;
            border-left: 4px solid #28a745;
        }
        .related-product {
            transition: transform 0.3s;
        }
        .related-product:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb" class="bg-light py-3">
            <div class="container">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="/" class="text-decoration-none">首页</a></li>
                    <li class="breadcrumb-item"><a href="/product/list" class="text-decoration-none">农产品</a></li>
                    <li class="breadcrumb-item">
                        <a th:href="@{/product/list(category=${product.category})}" 
                           class="text-decoration-none" 
                           th:text="${product.category}">分类</a>
                    </li>
                    <li class="breadcrumb-item active" th:text="${product.name}">产品名称</li>
                </ol>
            </div>
        </nav>

        <!-- 产品详情 -->
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <!-- 产品图片 -->
                    <div class="col-md-6 mb-4">
                        <img th:src="@{${product.imageUrl} ?: '/images/default-product.jpg'}" 
                             th:alt="${product.name}" 
                             class="img-fluid product-image w-100"
                             style="height: 400px; object-fit: cover;">
                    </div>

                    <!-- 产品信息 -->
                    <div class="col-md-6">
                        <div class="product-info">
                            <div class="mb-3">
                                <span class="badge bg-success fs-6" th:text="${product.category}">分类</span>
                                <span class="badge bg-info fs-6 ms-2" th:text="${product.status}">状态</span>
                            </div>

                            <h1 class="h2 mb-3" th:text="${product.name}">产品名称</h1>

                            <!-- 价格区域 -->
                            <div class="price-section">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <h2 class="h3 mb-0">¥<span th:text="${product.price}">0.00</span></h2>
                                        <small>惠农直销价</small>
                                    </div>
                                    <div class="text-end">
                                        <div>库存：<span th:text="${product.stock}">0</span> 件</div>
                                    </div>
                                </div>
                            </div>

                            <!-- 产地信息 -->
                            <div class="feature-card">
                                <h5><i class="fas fa-map-marker-alt text-success"></i> 产地信息</h5>
                                <p class="mb-0" th:text="${product.origin}">产地</p>
                            </div>

                            <!-- 扶贫背景 -->
                            <div class="feature-card" th:if="${product.povertyBackground}">
                                <h5><i class="fas fa-heart text-danger"></i> 扶贫背景</h5>
                                <p class="mb-0" th:text="${product.povertyBackground}">扶贫背景信息</p>
                            </div>

                            <!-- 产品功效 -->
                            <div class="feature-card" th:if="${product.efficacy}">
                                <h5><i class="fas fa-leaf text-success"></i> 产品功效</h5>
                                <p class="mb-0" th:text="${product.efficacy}">产品功效信息</p>
                            </div>

                            <!-- 购买按钮 -->
                            <div class="d-grid gap-2 d-md-flex justify-content-md-start mt-4">
                                <button class="btn btn-success btn-lg me-md-2" type="button" onclick="showComingSoon('购买功能')">
                                    <i class="fas fa-shopping-cart"></i> 立即购买
                                </button>
                                <button class="btn btn-outline-success btn-lg" type="button" onclick="showComingSoon('收藏功能')">
                                    <i class="fas fa-heart"></i> 收藏
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 产品描述 -->
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4><i class="fas fa-info-circle"></i> 产品详细描述</h4>
                            </div>
                            <div class="card-body">
                                <p th:text="${product.description}" class="lead">产品详细描述...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 相关产品推荐 -->
        <section class="py-5 bg-light" th:if="${relatedProducts != null and !#lists.isEmpty(relatedProducts)}">
            <div class="container">
                <h3 class="text-center mb-5"><i class="fas fa-thumbs-up"></i> 相关推荐</h3>
                <div class="row">
                    <div th:each="relatedProduct : ${relatedProducts}" class="col-lg-3 col-md-4 col-sm-6 mb-4">
                        <div class="card related-product h-100">
                            <img th:src="@{${relatedProduct.imageUrl} ?: '/images/default-product.jpg'}" 
                                 th:alt="${relatedProduct.name}" 
                                 class="card-img-top" 
                                 style="height: 200px; object-fit: cover;">
                            <div class="card-body d-flex flex-column">
                                <h6 class="card-title" th:text="${relatedProduct.name}">产品名称</h6>
                                <p class="card-text small text-muted mb-2">
                                    <i class="fas fa-map-marker-alt"></i> <span th:text="${relatedProduct.origin}">产地</span>
                                </p>
                                <div class="mt-auto">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-success fw-bold">¥<span th:text="${relatedProduct.price}">0.00</span></span>
                                        <a th:href="@{/product/detail/{id}(id=${relatedProduct.id})}" 
                                           class="btn btn-sm btn-outline-success">查看</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- jQuery -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <!-- Bootstrap JS -->
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
    <!-- 自定义JS -->
    <script th:src="@{/js/common.js}"></script>
</body>
</html> 